<template>
  <div>
    <el-dialog
      v-model="props.dialogVisible"
      :title="title"
      width="600"
      :before-close="handleClose"
    >
      <el-form
        :inline="true"
        :model="submitFrom"
        label-width="auto"
        ref="sitesFrom"
        :rules="rules"
      >
        <el-form-item label="采集类型" prop="collectionTypeId" required>
          <el-select
            v-model="submitFrom.collectionTypeId"
            placeholder="请选择"
            style="width: 500px"
          >
            <el-option
              v-for="dict in sys_acquisition_type"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="采集网站" prop="name" required>
          <el-input
            style="width: 500px"
            v-model.trim="submitFrom.name"
            placeholder="请输入"
          />
        </el-form-item>
        <el-form-item label="URL" prop="url" required>
          <el-input
            style="width: 460px"
            v-model.trim="submitFrom.url"
            placeholder="URL"
          />
        </el-form-item>
        <el-form-item label="语言" prop="languageId">
          <el-select
            v-model="submitFrom.languageId"
            placeholder="请选择"
            style="width: 460px"
          >
            <el-option
              v-for="dict in sys_language_type"
              :key="dict.id"
              :label="dict.description"
              :value="dict.id"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="货币" prop="currencyId">
          <el-select
            v-model="submitFrom.currencyId"
            placeholder="请选择"
            style="width: 460px"
          >
            <el-option
              v-for="dict in sys_acquisition_currency"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input
            v-model.trim="submitFrom.description"
            style="width: 460px"
            type="textarea"
            maxlength="300"
            show-word-limit
            placeholder="请输入（0~300）"
             rows="10"
            resize="none"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSure(sitesFrom)">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, defineProps, defineEmits, watch, onMounted } from "vue";
const emits = defineEmits(["handleSure", "handleClose"]);
const { proxy } = getCurrentInstance();
const sys_acquisition_currency = ref([]); //获取货币
const sys_language_type = ref([]); //获取语言类别
const sys_acquisition_type = ref([]); //获取采集类型
const sitesFrom = ref();
const isAdd = ref(true); //默认是新增
const title = ref("新增"); //标题
const submitFrom = ref({
  collectionTypeId: "", //采集站点所用的采集类型
  name: "", //采集网站
  url: "", //采集站点的地址
  languageId: null, //采集到的语言类型
  currencyId: null, //采集到的货币Code
  description: "", //站点描述
}); //需要提交的数据

const rules = reactive({
  collectionTypeId: [{ required: true, message: "请选择", trigger: "blur" }],
  name: [{ required: true, message: "请输入", trigger: "blur" }],
  url: [
    { required: true, message: "请输入", trigger: "blur" },
    {
      validator: (rule, value, callback) => {
        // 定义URL验证的正则表达式
        const pattern = /^(https?:\/\/)?([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(:\d+)?$/;
        if (!pattern.test(value)) {
          callback(new Error("请正确输入URL"));
        } else {
          callback();
        }
      },
      trigger: "blur",
    },
  ],
});

const props = defineProps({
  item: {
    type: Object,
    default: () => {
      return {};
    },
  },
  dialogVisible: {
    type: Boolean,
    default: false,
  },
});
watch(
  () => props.dialogVisible,
  () => {
    if (!props.dialogVisible) return;
    if (Object.keys(props.item).length) {
      product.collectionsite
        .collectionsiteGetbyid({
          pathParams: {
            id: props.item.id,
          },
        })
        .then((res) => {
          if (res) {
            title.value = "编辑";
            isAdd.value = false;
            submitFrom.value.collectionTypeId = res.data.collectionTypeId;
            submitFrom.value.name = res.data.name;
            submitFrom.value.url = res.data.url;
            submitFrom.value.languageId = res.data.languageId;
            submitFrom.value.currencyId = res.data.currencyId;
            submitFrom.value.description = res.data.description;
          }
        });
    } else {
      title.value = "新增";
      isAdd.value = true;
    }
    // console.log(props.dialogVisible, "新的值:");
  }
);

// 确定
const handleSure = (formEl) => {
  if (!formEl) return;
  formEl.validate((valid, fields) => {
    if (valid) {
      // console.log(submitFrom.value, "submit!");
      if (isAdd.value) {
        product.collectionsite
          .collectionsiteCheckurl({
            data: {
              url: submitFrom.value.url,
            },
          })
          .then((res) => {
            if (res.code === 200) {
              product.collectionsite
                .collectionsiteAdd({
                  data: submitFrom.value,
                })
                .then((res) => {
                  if (res.code === 200) {
                    proxy.$modal.msgSuccess("添加成功");
                    proxy.resetForm("sitesFrom");
                    emits("handleSure");
                  }
                });
            }
          });
      } else {
        product.collectionsite
          .collectionsiteUpdate({
            pathParams: {
              id: props.item.id,
            },
            data: submitFrom.value,
          })
          .then((res) => {
            if (res.code === 200) {
              proxy.$modal.msgSuccess("修改成功");
              proxy.resetForm("sitesFrom");
              emits("handleSure");
            }
          });
      }
    } else {
      console.log(submitFrom.value, "error submit!", fields);
    }
  });
};

// 取消
const handleClose = () => {
  proxy.resetForm("sitesFrom");
  emits("handleClose");
};
const getLanguage = () => {
  // 获取货币
  product.currency.currencyList().then((res) => {
    if (res.data?.length) {
      res.data = res.data.map((code) => {
        return {
          ...code,
          label: code.description,
          value: code.id,
        };
      });
    }
    sys_acquisition_currency.value = res.data;
  });
  // 获取采集类型
  product.collectiontype
    .collectiontypeList({
      data: {
        pageNum: 1,
        pageSize: 90,
      },
    })
    .then((res) => {
      if (res.data?.length) {
        res.data = res.data.map((code) => {
          return {
            ...code,
            label: code.name,
            value: code.id,
          };
        });
      }
      sys_acquisition_type.value = res.data;
    });
  // 获取语言
  product.language.languageList().then((res) => {
    sys_language_type.value = res.data;
  });
};
onMounted(() => {
  getLanguage();
});
</script>

<style scoped>
</style>